import React, { useEffect, useState } from "react";
import { Tabs } from "antd-mobile";
import axios from "axios";
import { Card } from "antd";
function Index() {
  const [data, setData] = useState();
  const getdata = () => {
    axios.get("/api/article/list").then((res) => {
      setData(res.data.rows);
    });
  };
  useEffect(() => {
    getdata();
  }, []);
  const { Meta } = Card;

  return (
    <div>
      <Tabs>
        <Tabs.Tab title="水果" key="fruits">
          <div style={{ display: "flex" }}>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="vegetables">
              <div style={{ display: "flex" }}>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1FxPEP.img?w=768&h=323&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1FxPEP.img?w=768&h=323&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1FxPEP.img?w=768&h=323&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="动物" key="animals">
              <div style={{ display: "flex" }}>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1Fy6mt.img?w=640&h=438&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1Fy6mt.img?w=640&h=438&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
            <Card
              hoverable
              style={{ width: 240 }}
              cover={
                <img
                  alt="example"
                  src="https://img-s.msn.cn/tenant/amp/entityid/AA1Fy6mt.img?w=640&h=438&m=6"
                />
              }
            >
              <Meta
                title="Europe Street beat"
                description="www.instagram.com"
              />
            </Card>
          </div>
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default Index;
